<script>
import imageUpload from "@/components/imageUpload/index.vue"
import request from "@/utils/request"

export default {
  name: "studyImagesUpload",
  components: { imageUpload },
  props: {
    details: Object,
  },
  watch: {
    details: {
      handler(val) {
        if (val.studyImagesList && val.studyImagesList.length > 0) {
          this.studyImagesList = val.studyImagesList
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      studyImagesList: [""],
			//是否有未提交的更改
			hasUnsavedChanges: false,
    }
  },
  methods: {
    //上传追加学习图片
    uploadStudyImages() {
      //排除掉空的项
      const studyImagesList = this.studyImagesList.filter((item) => item)
      //检查用户是否有上传图片
      if (studyImagesList.length === 0) {
        uni.showToast({
          title: "请上传学习图片",
          icon: "none",
        })
        return
      }
      //提交
      request({
        url: "studyRoomUserPlan/updateStudyImages",
        data: {
          userPlanId: this.details.userPlanId,
					studyImagesList: studyImagesList,
        },
        showLoading: true,
        errorHandle: true,
      }).then(() => {
				this.hasUnsavedChanges = false
        uni.showToast({
          title: "上传成功",
          icon: "success",
        })
      })
    },
  },
}
</script>

<template>
  <view class="image-upload-container">
    <view class="tips">拍照或截图记录本次学习情况吧~</view>
    <!--					文件上传组件-->
    <view class="upload-component-list">
      <view class="upload-component" v-for="(item, index) in studyImagesList" :key="index">
        <image-upload
          width="170rpx"
          height="170rpx"
          v-model="studyImagesList[index]"
          :allow-delete="true"
          :uploadParams="{ dir: 'studyRoom' }"
          @change="
            (val) => {
							hasUnsavedChanges = true
              if (val) {
                studyImagesList.push('')
              } else {
                studyImagesList.splice(index, 1)
              }
            }
          "
        ></image-upload>
      </view>
    </view>
    <!--					上传按钮-->
    <view class="upload-btn-container d-flex justify-end">
      <view class="upload-btn d-flex align-center justify-center" @click="uploadStudyImages">提交</view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.image-upload-container {
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  border: 2rpx solid #2cb980;
  padding: 20rpx 30rpx;
  margin-top: 20rpx;

  > .tips {
    font-size: 30rpx;
    color: var(--text-color-light);
  }

  > .upload-component-list {
    margin-top: 30rpx;
    display: flex;
    flex-wrap: wrap;

    > .upload-component {
      margin-right: 30rpx;
      margin-bottom: 30rpx;
    }
  }

  > .upload-btn-container {
    > .upload-btn {
      width: 140rpx;
      height: 56rpx;
      color: white;
      background: #2cb980;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      font-size: 30rpx;
    }
  }
}
</style>
